import React, { useMemo, useState } from 'react'
import { useSelector } from 'react-redux'
import type { RootState } from '../../store/index'
import style from './Compare.module.scss'
import classNames from 'classnames'
import { useNavigate } from 'react-router-dom'


// const tab = [
//   {
//     title:'建议少吃',
//     list:[]
//   },
//   {
//     title:'适量食用',
//     list:[]
//   },
//   {
//     title:'放心食用',
//     list:[]
//   }

// ]



const Compare:React.FC = () => {
  const navigate = useNavigate()
  const [curIndex,setCurIndex] = useState(0)
  const selected = useSelector((state:RootState) => state.food.selected)
  const tabList = useMemo(() => {
    const tab = [
      {
        title:'建议少吃',
        min:70,
        max:100,
        list:[]
      },
      {
        title:'适量食用',
        min:40,
        max:70,
        list:[]
      },
      {
        title:'放心食用',
        min:0,
        max:40,
        list:[]
      }
    
    ]
    return tab.map(item => {
      return {
        ...item,
        list:selected.filter(v=>Number(v.glycemicIndex)>=item.min && Number( v.glycemicIndex)<item.max)
      }
    })
  },[selected])

  console.log(tabList)
  return (
    <div className={style.page}>
      <nav>
        {tabList.map((item,index) => 
          <div 
          key={item.title} 
          className={classNames(style.tabList,{[style.active]:index === curIndex})}
          onClick={() => setCurIndex(index)}
          >
            <h3>{item.title}</h3>
            <p>{item.list.length}</p>
          </div>
        )}
      </nav>
      <div className={style.list}>
        {tabList[curIndex].list.map(item => 
          <div className={style.card} key={item.name} onClick={() => navigate(`/detail?name=${item.name}`) }>
            <h3>{item.name}</h3>
            <img src={item.imgUrl} width={100} alt="" />
            <p>{item.content}</p>
          </div>
        )}
      </div>
    </div>
  )
}

export default Compare